<template>
  <div class="douban">
    <h1>{{ msg }}</h1>
    <ul>
      <li v-for="article in articles">
        <div class="m-img inl-block">
          <img v-bind:src="article.images.small">
        </div>
        <div class="m-content inl-block">
          <div>{{ article.title }}</div>
          <div>{{ article.year }}</div>
          <div>{{ article.subtype }}</div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: 'douban',
    data () {
      return {
        msg: '电影列表',
        articles: []
      }
    },
    created: function () {
      this.$http.jsonp('https://api.douban.com/v2/movie/top250?count=3', {}, {
        headers: {

        },
        emulateJSON: true
      }).then(response => {
        console.log(response)
        this.articles = response.data.subjects
      }, response => {
        console.log(response)
      })
    }
  }
</script>

<style>
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .inl-block {
    display: inline-block;
  }
  .m-content{
    margin-left: 20px;
  }
</style>
